import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import { Table, Menu, Popconfirm, message } from 'antd';


import termActions from '../action'
import appActions from '../../app/action'
import TermForm from './TermForm';

export class Term extends Component {

  state = {
    index : null,
    formType : 'add',
    formValues : null,
    formVisible : false
  }

  constructor (props) {
    super(props);

    /**
     * table头部
     * @type {*[]}
     */
    this.columns = [{
      title: '分类名称',
      width: 150,
      dataIndex: 'term_name',
      key: 'name',
    }, {
      title: '缩略名',
      width: 150,
      dataIndex: 'term_slug',
      key: 'slug',
    },{
      title: '分类描述',
      dataIndex: 'term_desc',
      key: 'desc',
    }, {
      title : '操作',
      render: (text,record,index) => {
        return (
          <span>
            <a href="JavaScript:;" onClick={this.handleTermEdit.bind(this,record,index)}>编辑</a>
            <span className="ant-divider" />
            <Popconfirm title="确定删除此分类么?" onConfirm={this.handleTermDelete.bind(this,record,index)} >
              <a href="#">删除</a>
            </Popconfirm>
          </span>
        )
      },
    }];
  }

  componentDidMount () {
    this.getTermList();
  }

  /**
   * 获取分类列表
   */
  getTermList () {
    const { appActions, termActions } =  this.props;
    appActions.loading(true).then(()=>{
      return termActions.getList()
    }).then(()=>{
      appActions.loading(false);
    }).catch(err=>{
      message.error(err.msg);
    })
  }

  /**
   * 菜单点击操作
   * @param e
   */
  handleMenuClick (e) {
    if(e.key === 'add'){
      this.setState({
        formType : 'add',
        formValues : null,
        formVisible : true
      })
    }
  }

  /**
   * 隐藏modal弹出层
   */
  handleHideModal () {
    this.setState({
      formValues : null,
      formVisible:false
    })
  }
  
  handleTermSubmit (formdata) {
    const {termActions} = this.props;
    if(formdata._id){
      formdata.index = this.state.index;
      termActions.postEditTerm(formdata).then(data=>{
        this.handleHideModal();
      }).catch(err=>{
        typeof err.msg == 'object' ?
          message.error(err.msg.message) :
          message.error(err.msg);
      });
    }else{
      termActions.postAddTerm(formdata).then(data=>{
        this.handleHideModal();
      }).catch(err=>{
        message.error(err.msg);
      });
    }
  }

  handleTermEdit (formValues,index) {
    this.setState({
      index,
      formType : 'edit',
      formVisible:true,
      formValues
    })
  }
  

  /**
   * 操作删除分类
   * @param _id
   */
  handleTermDelete (formdata,index) {
    this.props.termActions.postDeleteTerm({
      index,
      _id : formdata._id,
    }).then(data=>{
      message.success('删除成功');
    }).catch(err=>{
      message.error(err.msg);
    })
  }

  render() {

    const {term} = this.props;
    const list = term.get('termlist') && term.get('termlist').toArray();

    return (
      <div>
        <Menu onClick={this.handleMenuClick.bind(this)}
              selectedKeys={['list']}
              mode="horizontal">
          <Menu.Item key="list">
            分类列表
          </Menu.Item>
          <Menu.Item key="add" style={{marginLeft: 20}}>
            添加分类
          </Menu.Item>
        </Menu>

        <Table
          bordered
          columns={this.columns}
          dataSource={list}
          className="mt20"
          pagination={false}
        />

        <TermForm
          formType={this.state.formType}
          formValues={this.state.formValues}
          formVisible={this.state.formVisible}
          handleHide={this.handleHideModal.bind(this)}
          handleOK={this.handleTermSubmit.bind(this)}
        />
      </div>
    )
  }

}

export default connect((state)=>{
  return  {
    term : state.get('term')
  }
},dispatch => {
  return {
    termActions : bindActionCreators(termActions, dispatch),
    appActions : bindActionCreators(appActions, dispatch)
  }
})(Term);
